<script setup>
import * as echarts from "echarts"
import {onMounted, ref, watch} from "vue";
const discover=ref()
const props=defineProps({
  redTideDiscovery:{
    type:Object,
    default:()=>({})
  }
})
const option=ref({
  title: {
    text: '我国海域赤潮发现次数',
    textStyle: {
      fontSize:14
    },
    left: 'left'
  },
  legend: {
    textStyle: {
      //fontSize:14加
    },
    x:"right"
  },
  grid: {
    left: '1%',/*3*/
    right: '3%',/*4*/
    bottom: '2%',/*3*/
    containLabel: true
  },
  tooltip: {},
  dataset: {
    // dimensions: ['product', '2021', '2022', '2023'],
    dimensions: [],
    source: [
      // { product: '南海', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
})
onMounted(()=>{
  let myChart = echarts.init(discover.value, 'dark', {
    renderer: 'canvas',
    useDirtyRect: false
  });
  let app = {};
  myChart.setOption(option.value);
  window.addEventListener('resize', myChart.resize);
  watch(props,()=>{
    const newSea={}
    const map=new Map()
    map.set("bo_sea","渤海")
    map.set("east_sea","东海")
    map.set("south_sea","南海")
    map.set("yellow_sea","黄海")
    const keys=Object.keys(props.redTideDiscovery)
    //更新各个海域数据
    keys.forEach((key)=>{
      const newSea={}
      for (const sea of props.redTideDiscovery[key]){
        newSea[sea.year]=sea.frequency
      }
      newSea.product=map.get(key)
      option.value.dataset.source.push(newSea)
    })
    //更新年份类型
    option.value.dataset.dimensions=props.redTideDiscovery[keys[0]].map(item=>item.year)
    option.value.dataset.dimensions.sort()
    option.value.dataset.dimensions.unshift("product")

    myChart.setOption(option.value);
  })
})
</script>

<template>
  <div class="content-right2" ref="discover"></div>
</template>

<style scoped>
.content-right2{
  flex-grow:1;
}
</style>
<!--2024/2/2 13:14-->